<script setup>
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
import {ref,onMounted} from 'vue'
let firstThree = ref()
const scene = new THREE.Scene()

const geometry = new THREE.BoxGeometry(50,50,50)

const metaerial = new THREE.MeshBasicMaterial({
  color:'red',
  transparent:true,
  opacity:0.3
})

const mesh = new THREE.Mesh(geometry,metaerial);
mesh.position.set(0,10,0)
scene.add(mesh)

/**
 * 创建一个三维坐标轴
 */
const axesHelper = new THREE.AxesHelper(150)
scene.add(axesHelper)

const width = 800;
const height = 500;

const camera = new THREE.PerspectiveCamera(30,width/height,1,3000)
camera.position.set(292,223,185)
camera.lookAt(0,0,0)


const renderer = new THREE.WebGLRenderer();
renderer.setSize(width,height)
renderer.render(scene,camera)

/**
 * 使用控制器
 */
const controls = new OrbitControls(camera,renderer.domElement)
controls.addEventListener("change",function(){
  renderer.render(scene,camera)
})
onMounted(()=>{
  document.getElementById("firstThree").appendChild(renderer.domElement)
})

</script>

<template>
  <div id="firstThree" ref="firstThree"></div>
</template>

<style scoped>
  #firstThree{
    width: 800px;
    height: 500px;
  }
</style>
